<template>
    <div class="AnewHouse">
        <!-- 顶部通栏 -->
        <div class="new-header">
            <div class="container">
                <!-- 左边 -->
                <ul class="link-list-wrapper">
                    <router-link tag="li" to="/home">首页</router-link>
                    <router-link tag="li" to="/secondHand">二手房</router-link>
                    <li class="selected">新房</li>
                    <router-link tag="li" to="/rental">租房</router-link>
                    <router-link tag="li" to="/Office">写字楼</router-link>
                    <router-link tag="li" to="/village">小区</router-link>
                    <li>工具</li>
                    <router-link tag="li" to="/release">发布房源</router-link>
                </ul>
                <!-- 右边 -->
                <div class="user-wrapper">
                    <span class="phone">热线电话 1010-9000</span>
                    <i></i>
                    <div class="logout-wrapper">
                        <span style="display:none" v-if="!userInfo">登录 / 注册</span>
                        <span v-if="userInfo">{{userInfo}}</span>
                        <span v-if="userInfo">退出</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="AnewHouse-nav">
            <div class="AnewHouse-nav-left">
                <div class="logo"></div>
                <span class="nav-border"></span>
                <div class="s-city">
                    <span>广州</span>
                </div>
                <ul class="nav-list">
                    <li class="selected">首页</li>
                    <router-link tag="li" to="/estate">楼盘</router-link>
                    <router-link tag="li" to="/onSale">在售</router-link>
                    <li>地图找房</li>
                </ul>
            </div> 
            <div class="AnewHouse-nav-right">
                <i></i>
                <span>客服热线 1010-9000</span>
            </div>
        </div>
        <!-- 版图开始 -->
        <div class="AnewHouse-banner">
            <!-- 地图 -->
            <div class="map">
                <div class="mapTop">
                    <div class="s-city">
                        <i></i>
                        <span>广州</span>
                        <span>GUANGZHOU</span>
                    </div>
                    <div class="s-map">
                        地图找房
                    </div>
                </div>
                <div class="mapBottom">
                    <div class="map-text">
                        <p>在售楼盘：<span>1447个</span></p>
                    </div>
                </div>
            </div>
            <!-- 搜索 -->
            <div class="AnewHouse-filter">
                <!-- 搜索框 -->
                <div class="formSearch">
                    <input type="text" placeholder="楼盘名/关键字" autocomplete="off">
                    <div class="btn"></div>
                </div>
                <!-- 推荐搜索 -->
                <div class="recommendBlock">
                    <i class="sub">推荐搜索：</i>
                    <span>万科金域曦府</span>
                    <span>中建|鄂旅投·岭南悦府</span>
                    <span>雅居乐花城雅郡</span>
                </div>
                <!-- 选择 -->
                <div class="chooseBlock">
                    <p>试试条件找房：</p>
                    <div class="choose">
                        <div class="fix-item">城区</div>
                        <ul class="item">
                            <li>南沙</li>
                            <li>荔湾</li>
                            <li>越秀</li>
                            <li>海珠</li>
                            <li>天河</li>
                            <li>白云</li>
                            <li>黄埔</li>
                            <li>番禺</li>
                            <li>花都</li>
                            <li>增城</li>
                            <li>从化</li>
                            <li>鹤山市</li>
                            <li>肇庆市</li>
                            <li>佛山市</li>
                        </ul>
                        <i></i>
                    </div>
                    <div class="choose">
                        <div class="fix-item">类型</div>
                        <ul class="item">
                            <li>住宅</li>
                            <li>别墅</li>
                            <li>商业</li>
                            <li>写字楼</li>
                            <li>底商</li>
                        </ul>
                        <i></i>
                    </div>
                    <div class="choose">
                        <div class="fix-item">户型</div>
                        <ul class="item">
                            <li>1居</li>
                            <li>2居</li>
                            <li>3居</li>
                            <li>4居</li>
                            <li>5居</li>
                            <li>5居+</li>
                        </ul>
                        <i></i>
                    </div>
                    <div class="choose">
                        <div class="fix-item">总价</div>
                        <ul class="item">
                            <li>50万以下</li>
                            <li>50-80万</li>
                            <li>80-100万</li>
                            <li>100-120万</li>
                            <li>100-120万</li>
                            <li>120-150万</li>
                            <li>150-200万</li>
                            <li>200-300万</li>
                            <li>300万以上</li>
                        </ul>
                        <i></i>
                    </div>
                </div>
                <!-- 筛选 -->
                <div class="fil-btn">
                    <span>筛选</span>
                </div>
            </div>
        </div>
        <!-- 版图结束 -->
        <!-- 精选楼盘推荐开始 -->
        <div class="AnewHouse-hot">
            <div class="wrapper-AnewHouse">
                <!-- 标题 -->
                <div class="wrapper-title">
                    <h4>精选楼盘</h4>
                </div>
                <!-- 列表 -->
                <div class="items">
                    <ul>
                        <li>
                            <div class="itemLeft">
                                <img src="../assets/image/recommend1.jpg" alt="">
                            </div>
                            <div class="itemRight">
                                <p class="title">
                                    <span class="labname">时代印记</span>
                                    <span class="lab">住宅</span>
                                </p>
                                <p class="list-name">
                                    <i></i>
                                    黄埔
                                </p>
                                <p class="list-area">建面 73-136㎡</p>
                                <p class="list-mt">
                                    均价
                                    <span class="price">24500 元/平</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="itemLeft">
                                <img src="../assets/image/recommend1.jpg" alt="">
                            </div>
                            <div class="itemRight">
                                <p class="title">
                                    <span class="labname">时代印记</span>
                                    <span class="lab">住宅</span>
                                </p>
                                <p class="list-name">
                                    <i></i>
                                    黄埔
                                </p>
                                <p class="list-area">建面 73-136㎡</p>
                                <p class="list-mt">
                                    均价
                                    <span class="price">24500 元/平</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="itemLeft">
                                <img src="../assets/image/recommend1.jpg" alt="">
                            </div>
                            <div class="itemRight">
                                <p class="title">
                                    <span class="labname">时代印记</span>
                                    <span class="lab">住宅</span>
                                </p>
                                <p class="list-name">
                                    <i></i>
                                    黄埔
                                </p>
                                <p class="list-area">建面 73-136㎡</p>
                                <p class="list-mt">
                                    均价
                                    <span class="price">24500 元/平</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="itemLeft">
                                <img src="../assets/image/recommend1.jpg" alt="">
                            </div>
                            <div class="itemRight">
                                <p class="title">
                                    <span class="labname">时代印记</span>
                                    <span class="lab">住宅</span>
                                </p>
                                <p class="list-name">
                                    <i></i>
                                    黄埔
                                </p>
                                <p class="list-area">建面 73-136㎡</p>
                                <p class="list-mt">
                                    均价
                                    <span class="price">24500 元/平</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 精选楼盘推荐结束 -->
        <!-- 分割线 -->
        <div class="wrapper-AnewHouse">
            <div class="line"></div>
        </div>
        <!-- 推荐楼盘开始 -->
        <div class="AnewHouse-all">
            <div class="wrapper-all-Anewhouse">
                <!-- 头部 -->
                <div class="wrapper-title">
                    <h4>推荐楼盘</h4>
                    <div class="all">
                        在售楼盘
                        <i>1448</i>
                        个
                    </div>
                </div>
                <!--内容 -->
                <div class="item-lists">
                    <ul>
                        <li>
                            <div class="image">
                                <img src="../assets/image/anewR1.jpg" alt="">
                                <span class="centercontent">万科金域曦府</span>
                                <span class="info">
                                    <i></i>
                                【荔湾】荔湾区地铁1号线花地湾站旁
                                </span>
                            </div>
                            <div class="information">
                                <p>均价：<span>55000 元/平</span>
                                </p>
                                <div class="type">住宅</div>
                            </div>
                            <div class="bottom">
                                建面 72-132m²
                            </div>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/image/anewR1.jpg" alt="">
                                <span class="centercontent">万科金域曦府</span>
                                <span class="info">
                                    <i></i>
                                【荔湾】荔湾区地铁1号线花地湾站旁
                                </span>
                            </div>
                            <div class="information">
                                <p>均价：<span>55000 元/平</span>
                                </p>
                                <div class="type">住宅</div>
                            </div>
                            <div class="bottom">
                                建面 72-132m²
                            </div>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/image/anewR1.jpg" alt="">
                                <span class="centercontent">万科金域曦府</span>
                                <span class="info">
                                    <i></i>
                                【荔湾】荔湾区地铁1号线花地湾站旁
                                </span>
                            </div>
                            <div class="information">
                                <p>均价：<span>55000 元/平</span>
                                </p>
                                <div class="type">住宅</div>
                            </div>
                            <div class="bottom">
                                建面 72-132m²
                            </div>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/image/anewR1.jpg" alt="">
                                <span class="centercontent">万科金域曦府</span>
                                <span class="info">
                                    <i></i>
                                【荔湾】荔湾区地铁1号线花地湾站旁
                                </span>
                            </div>
                            <div class="information">
                                <p>均价：<span>55000 元/平</span>
                                </p>
                                <div class="type">住宅</div>
                            </div>
                            <div class="bottom">
                                建面 72-132m²
                            </div>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/image/anewR1.jpg" alt="">
                                <span class="centercontent">万科金域曦府</span>
                                <span class="info">
                                    <i></i>
                                【荔湾】荔湾区地铁1号线花地湾站旁
                                </span>
                            </div>
                            <div class="information">
                                <p>均价：<span>55000 元/平</span>
                                </p>
                                <div class="type">住宅</div>
                            </div>
                            <div class="bottom">
                                建面 72-132m²
                            </div>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/image/anewR1.jpg" alt="">
                                <span class="centercontent">万科金域曦府</span>
                                <span class="info">
                                    <i></i>
                                【荔湾】荔湾区地铁1号线花地湾站旁
                                </span>
                            </div>
                            <div class="information">
                                <p>均价：<span>55000 元/平</span>
                                </p>
                                <div class="type">住宅</div>
                            </div>
                            <div class="bottom">
                                建面 72-132m²
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 底部 -->
                <router-link tag="div" to="/estate" class="readMore">
                    <span>查看更多</span>
                </router-link>
            </div>
        </div>
        <!-- 推荐楼盘结束 -->
    </div>
</template>

<script>
    export default {
        name:"AnewHouseView",
        data() {
            return {
                userInfo:"",
            }
        },
        created(){
            // 判断是否有token值
            if(window.localStorage.getItem("token")){
              let phone = window.localStorage.getItem("token");
              this.userInfo = phone.substring(0,3) + "***" + phone.substring(phone.length -3);
            }
        }
    }
</script>

<style lang="scss" scoped>
.AnewHouse{
    .new-header{
        height: 36px;
        display: flex;
        border-bottom: 1px solid #eeeeee;
        box-shadow: 0 1px 0 0 #eee;
        .container{
            display: flex;
            justify-content: space-between;
            // 左边
            .link-list-wrapper{
                height: 37px;
                display: flex;
                li{
                    height: 37px;
                    // width: 48px;
                    margin-right: 21.5px;
                    font-size: 12px;
                    line-height: 37px;
                    color: #9b9b9b;
                    text-align: left;
                    cursor: pointer;
                    &:hover{
                        color: #00a75b;
                    }
                    &.selected{
                        color: #151515;
                    }
                }
            }
            // 右边
            .user-wrapper{
                display: flex;
                align-items: center;
                .phone{
                    padding-right: 20px;
                    font-size: 12px;
                    color: #9c9fa1;
                    line-height: 36px;
                }
                i{
                    height: 12px;
                    border-left: 1px solid #d8d8d8;
                }
                .logout-wrapper{
                    padding-left:20px;
                    span{
                        font-size: 12px;
                        color: #9c9fa1;
                        white-space: pre-wrap;
                        cursor: pointer;
                        &:last-child{
                            margin-left: 5px;
                        }
                        &:nth-child(3){
                            margin-left: 15px;
                        }
                        &:hover{
                            color: #00a75b;
                        }
                    }
                }
            }
        }
    }
    .AnewHouse-nav{
        display: flex;
        justify-content: space-between;
        height: 87px;
        width: 1150px;
        margin:0 auto;
        .AnewHouse-nav-left{
            height: 87px;
            display: flex;
            align-items: center;
            .logo{
                width: 164px;
                height: 33px;
                // background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/logo.png?d1b6618b6716dfe8e97a)no-repeat 0 0;
                background: url("../assets/image/newhouselogo.png")no-repeat 0 center/cover;
                // background-size: 100% 100%;
                margin-top: -6px;
                cursor: pointer;
            }
            .nav-border{
                width: 1px;
                height: 28px;
                margin: 0 16px 5px;
                background: #ccc;
                vertical-align: middle;
            }
            .s-city{
                height: 26px;
                width: 44px;
                margin-bottom: 5px;
                line-height: 26px;
                border-radius: 2px;
                padding: 0 8px;
                text-align: left;
                border: 1px solid #dfdfdf;
                position: relative;
                cursor: pointer;
                span{
                    font-size: 14px;
                    color: #666;
                }
                &::after{
                    content: "";
                    position: absolute;
                    right: 8px;
                    top: 50%;
                    transform: translateY(-2px);
                    border: 4px solid transparent;
                    border-top-color: #999;
                }
            }
            .nav-list{
                margin-left: 90px;
                display: flex;
                li{
                    font-size: 16px;
                    color: #333;
                    height: 87px;
                    line-height: 87px;
                    margin-right: 30px;
                    text-align: center;
                    cursor: pointer;
                    &.selected{
                        color: #5dbb85;
                    }
                }
            }
        }
        .AnewHouse-nav-right{
            display: flex;
            align-items: center;
            height: 87px;
            i{
                background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/Sprite_Graphic_v2.png?00be729455e7d42bb669)no-repeat -83px -10px;
                width: 18px;
                height: 14px;
                margin-right: 3px;
            }
            span{
                font-size: 14px;
                white-space: pre-wrap;
                color: #00a75b;
                font-weight: 700;
            }
        }
    }
    .AnewHouse-banner{
        height: 444px;
        width: 100%;
        background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/banner.jpg?87c404a0b6aa4b9d748e)no-repeat 50%;
        position: relative;
        .map{
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            flex-direction: column;
            width: 248px;
            .mapTop{
                padding: 20px 15px 17px;
                height: 72px;
                width: 218px;
                background: #263138;
                display: flex;
                flex-direction: column;
                .s-city{
                    position: relative;
                    color: #fff;
                    margin-bottom: 10px;
                    width: 167px;
                    height: 15px;
                    line-height: 15px;
                    font-size: 14px;
                    cursor: pointer;
                    border: 1px solid #dfdfdf;
                    border-radius: 2px;
                    text-decoration: none;
                    padding: 0 8px;
                    i{
                        background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/Sprite_Graphic_v2.png?00be729455e7d42bb669)no-repeat -8px -10px;
                        width: 15px;
                        height: 15px;
                        display: inline-block;
                        margin:0 5px;
                        vertical-align: top;
                    }
                    span{
                        &:nth-child(3){
                            margin-left: 5px;
                        }
                    }

                    &::after{
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 8px;
                        content: " ";
                        display: inline-block;
                        width: 0;
                        height: 0;
                        margin: 2px 0 0 8px;
                        border: 4px solid transparent;
                        border-top-color: #999;
                        vertical-align: middle;
                    }
                }
                .s-map{
                    margin-top: 18px;
                    background-color: #f15044;
                    color: #fff;
                    border-radius: 2px;
                    width: 213px;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;
                    cursor: pointer;
                    margin-left: -1px;
                    font-size: 14px;
                }
            }
            .mapBottom{
                width: 248px;
                height: 335px;
                overflow: hidden;
                background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/map/map_default.png?e90dcdac59dcc5f0b091)no-repeat ;
                background-size: 250px 336px;
                position: relative;
                .map-text{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    margin: 12px 15px;
                    p{
                        font-size: 12px;
                        line-height: 22px;
                        color: #fff;
                        span{
                            font-size: 12px;
                            line-height: 22px;
                            // margin-left: 1px;
                            font-weight: 700;
                        }
                    }
                }
            }
        }
        .AnewHouse-filter{
            height:338px;
            width: 200px;
            padding: 53px 16px 53px 30px;
            background: rgba(57,172,106,.9);
            position: absolute;
            top: 0;
            left: 242px;
            .formSearch{
                display: flex;
                height: 38px;
                margin-bottom: 20px;
                input{
                    border: 1px solid #fff;
                    background: #369d67;
                    width: 134px;
                    height: 36px;
                    padding: 0 8px;
                    line-height: 36px;
                    border-radius: 2px;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                    color: #fff;
                    outline: none;
                   
                    &::-webkit-input-placeholder{
                        color:#c1dccb;
                    }
                }
                .btn{
                    width: 38px;
                    height: 39px;
                    padding: 0 6px;
                    box-sizing: border-box;
                    background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/Sprite_Graphic_v2.png?00be729455e7d42bb669)no-repeat -185px -10px;
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }
            }
            .recommendBlock{
                margin-bottom: 50px;
                width: 190px;
                font-size: 12px;
                color: #fff;
                line-height: 1.15;
                .sub{
                    font-size:12px ;
                    margin-right: 5px;
                    color: #c1dccb;
                    transform: scale(0.9);
                }
                span{
                    font-size: 12px;
                    margin-right: 5px;
                }
            }
            .chooseBlock{
                width: 200px;
                color: #394043;
                font-size: 14px;
                p{
                    font-size: 12px;
                    margin-bottom: 15px;
                    color: #fff;
                }
                .choose{
                    width: 70px;
                    height: 35px;
                    line-height: 35px;
                    margin-right: 10px;
                    margin-bottom:10px;
                    padding: 0 9px;
                    color: #fff;
                    background: #369d67;
                    border-radius: 2px;
                    border:1px solid #fff;
                    cursor: pointer;
                    display: inline-block;
                    position: relative;


                    &:hover>.item{
                        display: block;
                    }

                    .fix-item{
                        width: 50px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    // 下拉框
                    .item{
                        position: absolute;
                        left: -1px;
                        border: 1px solid #fff;
                        width: 100%;
                        background-color: #fff;
                        color: #000;
                        display: none;
                        max-height: 140px;
                        overflow: auto;
                        z-index: 2;
                        
                        

                        li{
                            text-align: left;
                            font-size: 12px;
                            width: 86%;
                            padding-left: 14%;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;

                            &:hover{
                                background: #f1f1f1;
                                color: #333;
                            }
                        }
                    }
                    i{
                        background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/Sprite_Graphic_v2.png?00be729455e7d42bb669)no-repeat -60px -9px;
                        width: 9px;
                        height: 7px;
                        position: absolute;
                        right: 16px;
                        top: 50%;
                        margin-top: -4px;

                    }
                }
               
            }
            .fil-btn{
                   margin-top: 30px;
                   border-radius: 2px;
                   text-align: center;
                   width: 190px;
                   height: 37px;
                   line-height: 38px;
                   background: #fff;
                   color: #39ac6a;
                   margin-top: 30px;
                   cursor: pointer;
                   font-weight: 700;
                   span{
                    font-size: 14px;
                   }
               }
        }
    }
    .AnewHouse-hot{
        width: 1150px;
        margin: 0 auto;
        .wrapper-AnewHouse{
            padding:40px 0 50px;
            width: 100%;
            .wrapper-title{
                width: 100%;
                height: 40px;
                font-size: 34px;
                line-height: 34px;
                font-weight: 700;
                margin-bottom: 43px;
                text-align: center;
            }
            .items{
                width: 1150px;
                height: 503px;
                
                ul{
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    li{
                        width: 550px;
                        height: 203px;
                        margin-bottom: 45px;
                        display: flex;
                        &:nth-child(1),&:nth-child(3){
                            margin-right: 50px;
                        }
                        .itemLeft{
                            width: 200px;
                            height: 200px;
                            img{
                                width: 100%;
                            }
                        }

                        .itemRight{
                            padding: 20px;
                            background: #f7f7f7;
                            height: 160px;
                            width: 310px;
                            .title{
                                font-size: 20px;
                                border-bottom: 1px solid #f0f0f0;
                                padding-bottom: 20px;
                                margin-bottom: 20px;
                                display: flex;
                                .labname{
                                    font-size: 20px;
                                    font-weight: 700;
                                    color: #000;
                                }
                                .lab{
                                    color: #999;
                                    padding: 0 5px;
                                    font-size: 14px;
                                    border: 1px solid #ccc;
                                    height: 23px;
                                    line-height: 23px;
                                    display: inline-block;
                                    margin-left: 10px;
                                }
                            }
                            .list-name{
                                color: #878787;
                                margin-bottom: 11px;
                                font-weight: 400;
                                font-size: 14px;
                                display: flex;
                                align-items: center;
                                i{
                                    background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/Sprite_Graphic_v2.png?00be729455e7d42bb669)no-repeat -134px -9px;
                                    width: 13px;
                                    height: 13px;
                                    margin-right: 2px;
                                }
                            }
                            .list-area{
                                font-size: 14px;
                                font-weight: 700;
                                white-space: pre-wrap;
                            }
                            .list-mt{
                                margin-top: 11px;
                                font-weight: 700;
                                font-size: 14px;
                                .price{
                                    color: #f15044;
                                    margin-left: 2px;
                                    white-space: pre-wrap;
                                }
                            }
                        }
                    }
                    
                }
            }
        }
    }
    .wrapper-AnewHouse{
        width: 1150px;
        margin: 0 auto;
        .line{
            background: url(https://s1.ljcdn.com/phoenix/static/dist/pages/index/img/line.png?d956b37143caf2b0f533) no-repeat;
            width: 100%;
            height: 7px;
            background-size: 100% 7px;

        }
    }
    .AnewHouse-all{
        width: 1150px;
        margin: 0 auto;

        .wrapper-all-Anewhouse{
            padding:40px 0 50px ;

            .wrapper-title{
                height: 39px;
                width: 100%;
                margin-bottom: 43px;
                position: relative;
                h4{
                    font-size: 34px;
                    font-weight: 700;
                    color: #394043;
                    text-align: center;
                }

                .all{
                    font-size: 12px;
                    font-weight: 700;
                    position: absolute;
                    bottom: -30px;
                    left: 0;
                    i{
                        display: inline-block;
                        font-size: 12px;
                        font-style: italic;
                        color: #1f99f4;

                    }
                }
            }
            .item-lists{
                ul{
                    display: flex;
                    flex-wrap: wrap;

                    li{
                        width: 342px;
                        height: 395px;
                        margin-bottom:52px;
                        margin-right: 62px;

                        .image{
                            width: 342px;
                            height: 342px;
                            position: relative;
                            margin-bottom: 12px;
                            .centercontent{
                                position: absolute;
                                width: 100%;
                                text-align: center;
                                left: 0;
                                top: 50%;
                                transform: translateY(-50%);
                                font-size: 26px;
                                color: #fff;
                                font-weight: 700;
                                text-shadow: 0 2px 4px rgb(0 0 0 / 20%)
                            }

                            .info{
                               position: absolute;
                               bottom: 18px;
                               color: #fff;
                               padding: 0 18px;
                               overflow: hidden;
                               text-overflow: ellipsis;
                               white-space: nowrap;
                               width: 300px;
                               left: 0;
                               font-size: 14px;

                               i{
                                    display: inline-block;
                                    background: url(https://s1.ljcdn.com/phoenix/static/dist/common/img/Sprite_Graphic_v2.png?00be729455e7d42bb669)no-repeat -156px -9px;
                                    width: 13px;
                                    height: 13px;
                               }

                            }
                            img{
                                width: 100%;
                            }
                        }
                        .information{
                            display: flex;
                            justify-content: space-between;
                            width: 342px;
                            height: 20px;
                            align-items: center;
                            
                            p{
                                font-size: 14px;
                                color: #394043;
                                span{
                                    font-size: 14px;
                                    color: #f15044;
                                    font-weight: 700;
                                }   
                            }
                            .type{
                                color: #999;
                                padding: 1px 5px;
                                font-size: 14px;
                                border: 1px solid #ccc;
                                background-color: #fff
                            }
                        }
                        .bottom{
                            height: 21px;
                            font-size: 14px;
                            line-height: 1.15;
                        }
                        
                        &:nth-child(3n){
                            margin-right: 0;
                        }
                    }
                }
            }
            .readMore{
                font-size: 13px;
                background: #ededee;
                text-align: center;
                display: inline-block;
                height: 45px;
                line-height: 45px;
                border-radius: 2px;
                width: 100%;
                cursor: pointer;
                color: #797c7f;

            }
        }
    }
}
</style>